import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import reportWebVitals from './reportWebVitals'

class StateTest extends React.Component {
  // 构造函数
  constructor(props) {
    // 传给React.Componet => 为了使用this.props获取数据
    super(props)
    // 状态(数据) -> view
    // 构造函数初始化数据, 将需要改变的数据初始化到state中
    this.state = {
      time: new Date().toLocaleString()
    }
  }
  render() {
    // 渲染函数是被重复调用的
    // console.log('这是渲染函数')
    // this.state.time = new Date().toLocaleString()
    return (
      <div>
        <h1>当前时间: {this.state.time}</h1>

      </div>
    )
  }
  // 生命周期函数, 组件渲染完成时的函数
  componentDidMount() {
    setInterval(() => {
      // 切勿直接修改state数据
      // this.state.time = new Date().toLocaleString()  // 错误的
      // ReactDOM.render(<StateTest/>, document.getElementById('root'))
      console.log(this.state.time)
      // 通过this.setState修改完数据后, 并不会立即修改DOM里面的内容, react会在这个函数内的所有设置状态改变后, 统一对比虚拟DOM对象, 然后再统一修改, 提升性能
      this.setState({
        time: new Date().toLocaleString()
      })
      console.log(this.state.time)
    }, 1000)
  }
}

ReactDOM.render(<StateTest/>, document.getElementById('root'))

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
